import React, { Component } from 'react'
import { Route, Link } from 'react-router-dom'
import Detail from '../../../components/Detail'

export default class Message extends Component {
    state = {
        messageArr: [
            {
                id: '01',
                title: '消息1'
            },
            {
                id: '02',
                title: '消息2'
            },
            {
                id: '03',
                title: '消息3'
            }
        ]
    }
    replaceShow = (id, title) => {
        return () => {
            // 编写一段代码，让其实现跳转到Detail组件，且为replace跳转(携带 params 参数)
            this.props.history.replace(`/home/message/detail/${id}/${title}`)
            // 编写一段代码，让其实现跳转到Detail组件，且为replace跳转(携带 search 参数)
            // this.props.history.replace(`/home/message/detail/?id=${id}&title=${title}`)
            // 编写一段代码，让其实现跳转到Detail组件，且为replace跳转(携带 state 参数)
            // this.props.history.replace(`/home/message/detail`, {id, title}) 
        }
    }
    pushShow = (id, title) => {
        this.props.history.push((`/home/message/detail/${id}/${title}`))
    }
    back = () => {
        this.props.history.goBack()
    }
    forward = () => {
        this.props.history.goForward()
    }
    go = () => {
        this.props.history.go(-2)
    }
    render() {
        const { messageArr } = this.state
        return (
            <div>
                <ul>
                    {
                        messageArr.map(item => {
                            return (
                                <li key={item.id}>
                                    {/* <Link to="/home/message/detail">{item.title}</Link> */}
                                    {/* 向路由组件传递 params 参数 */}
                                    <Link to={`/home/message/detail/${item.id}/${item.title}`}>{item.title}</Link>
                                    <button onClick={() => this.pushShow(item.id, item.title)}>push 查看</button>
                                    <button onClick={this.replaceShow(item.id, item.title)}>replace 查看</button>
                                    {/* 向路由组件传递 search 参数 */}
                                    {/* <Link to={`/home/message/detail/?id=${item.id}&title=${item.title}`}>{item.title}</Link> */}
                                    {/* 向路由组件传递 state 参数 */}
                                    {/* <Link to={{pathname:'/home/message/detail', state:{id:item.id,title:item.title}}}>{item.title}</Link> */}
                                </li>
                            )
                        })
                    }
                </ul>
                <hr />
                {/* <Route path="/home/message/detail" component={Detail}></Route> */}
                {/* 声明接收params参数 */}
                <Route path="/home/message/detail/:id/:title" component={Detail}></Route>
                {/* search参数无需声明接收 */}
                {/* <Route path="/home/message/detail" component={Detail}></Route> */}
                {/* state参数无需声明接收 */}
                {/* <Route path="/home/message/detail" component={Detail}></Route> */}

                <button onClick={this.back}>回退</button>
                <button onClick={this.forward}>前进</button>
                <button onClick={this.go}>跳转</button>
            </div>
        )
    }
}
